<template>
  <div :class="[theme,isIphonex ? 'iphone-nav-bottom-bar':'']" v-if="!isiOS && !isAdroid && navList && (navList.filter(item => item.enable == 0)).length != navList.length" class="nav-bottom-bar c-justify-sa c-fc-gray c-fs18">
    <!--navType:0： 首页，1：商城，2：活动，3：消息，4：我的
5： 直播，6：打卡，7：专栏，8：测评，9：社群
10：拼团，11分类，12：问答, 13: 约课，15：预约 24 面授课表-->
    <div v-if="item.navType != -1 && item.enable == 1 && showNavItem(item)" v-for="(item,index) in navList" :key="index" class="adiv c-ww88">
      <a v-if="item.navType == 0" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoIndex" :class="[itemIndex == 1 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 1 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe6d5;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>

      <a v-if="item.navType == 1 && companyAuth.enableMallModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoShop" :class="[itemIndex == 2 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 2 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe68f;</i>
        </div>
        <span>{{companyId == 'ldwk' ? '蜜友商城' : item.navName}}</span>
      </a>
      <a v-if="item.navType == 2 && companyAuth.enableActivityModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoActive" :class="[itemIndex == 3 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 3 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe760;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>

      <a v-if="item.navType == 6 && companyAuth.enableSignCardModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoSignCard" :class="[itemIndex == 6 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 6 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe83c;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 7 && companyAuth.enableColumnModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoColumn" :class="[itemIndex == 7 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 7 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe837;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 8 && companyAuth.enableExamModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoExam" :class="[itemIndex == 8 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 8 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe83b;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 9 && companyAuth.enableSocialGroup == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoSocialGroup" :class="[itemIndex == 9 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 9 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-if="item.navHref == -1" class="iconfont c-fs32">&#xe841;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 10 && companyAuth.enableCollage == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoCollage" :class="[itemIndex == 10 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 10 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe83e;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 12 && companyAuth.enableQuestionModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoQuestion" :class="[itemIndex == 11 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 11 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe83f;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 5 && companyAuth.enableTeleviseLive == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoLive" :class="[itemIndex == 12 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 12 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe845;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 13 && companyAuth.enableReservationModule == 1" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoReservation" :class="[itemIndex == 13 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 13 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe859;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 3" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoMessage" :class="[itemIndex == 5 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <div class="c-p c-ww32 c-hh32 c-br3 c-mlr-auto" v-if="item.navHref != -1">
            <img :src="itemIndex == 5 ? item.nav1Href : item.navHref" class="c-br3 c-ww32 c-hh32" alt="" />
            <circle-count :count="unReadMsgCount"></circle-count>
          </div>
          <i v-else class="iconfont c-fs32 c-p">&#xe7e6;<circle-count :count="unReadMsgCount"></circle-count> </i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 4" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoMine" :class="[itemIndex == 4 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 4 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe6d3;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>

      <a v-if="item.navType == 14" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoWord" :class="[itemIndex == 14 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 14 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe878;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 15" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoBooking" :class="[itemIndex == 15 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 15 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe808;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 16" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoInterativeTest" :class="[itemIndex == 16 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 16 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8cd;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 17" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoVoiceEvaluation" :class="[itemIndex == 17 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 17 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8cb;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 18" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoKnowledgePackage" :class="[itemIndex == 18 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 18 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8cf;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 19" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoCamp" :class="[itemIndex == 19 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 19 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8ce;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 20" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoData" :class="[itemIndex == 20 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 20 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8cc;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == -2" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb c-fc-gray" @click="clickGoOuterChain(e,item.otherHref)" :class="[itemIndex == -2 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == -2 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8ca;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 25" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickLivePersonalList" :class="[itemIndex == 25 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 25 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe69b;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 21" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickMoreClassList" :class="[itemIndex == 21 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 21 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe612;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 22" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" :style="homeThemeCol.length > 0 ? '--homeThemeCol:' + homeThemeCol : ''" @click="clickGoMicroPage(e, item)" :class="[itemIndex == item.mId ? (homeThemeCol.length > 0 ? 'homeTheme-fc' : 'theme-fc') : '', hoverClass(item.navType)]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == item.mId ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32" v-html="companyAuth && (item.mId == companyAuth.mallPageId) ? '&#xe68f;' : '&#xe916;'"></i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 23" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoEdu(e, item.otherHref)" :class="[itemIndex == 23 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 23 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xec2f;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 24" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoMyEdu(e, item.otherHref)" :class="[itemIndex == 24 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 24 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe650;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 26" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoPromotedAccountList" :class="[itemIndex == 26 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 26 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe733;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <a v-if="item.navType == 27" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoCircle" :class="[itemIndex == 27 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 27 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe6f8;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 课程 -->
      <a v-if="item.navType == 40 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoCourse" :class="[itemIndex == 40 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 40 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe69e;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 考试 -->
      <a v-if="item.navType == 41 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoTestPaper" :class="[itemIndex == 41 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 41 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe6b7;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 练习 -->
      <a v-if="item.navType == 42 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoItemBack" :class="[itemIndex == 42 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 42 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe74c;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 学习中心 -->
      <a v-if="item.navType == 43 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoLearnCenter" :class="[itemIndex == 43 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 43 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe723;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 分类 -->
      <a v-if="item.navType == 44 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoClassify" :class="[itemIndex == 44 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 44 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe619;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 推广 -->
      <a v-if="item.navType == 45 && $isWxApp()" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoSpread" :class="[itemIndex == 45 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 45 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe63c;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
      <!-- 跳转小程序 -->
      <a v-if="item.navType == 46" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb c-p" @click="clickGoWxApp(item)">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe948;</i>
        </div>
        <span>{{item.navName}}</span>
        <template v-if="!$isWxApp() && item.appID && item.otherHref">
          <wx-open-launch-weapp
            :id="'launchBtn'"
            :appId="item.appID"
            :path="item.otherHref"
            class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
            @error="handleErrorFn"
            @launch="handleLaunch"
            @ready="handleReady"
          >
            <script type="text/wxtag-template">
              <style>.masker {width: 100%;height: 40px;opacity: 0}</style>
              <span class="masker">立即跳转</span>
            </script>
          </wx-open-launch-weapp>
        </template>
      </a>
      <!-- ai助理 -->
      <a v-if="item.navType == 47" class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="clickGoAi(item)" :class="[itemIndex == 47 ? 'theme-fc':'', hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img v-if="item.navHref != -1" :src="itemIndex == 47 ? item.nav1Href : item.navHref" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
          <i v-else class="iconfont c-fs32">&#xe8b1;</i>
        </div>
        <span>{{item.navName}}</span>
      </a>
    </div>
    <!--优匹定制 36wegp-->
    <div v-if="(companyId == '36wegp' || companyId == 'lj7l') && qxArr.length > 0" class="adiv">
      <a class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center c-justify-sb" @click="showQyNX" :class="[hoverClass]">
        <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-center c-mb2">
          <img src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/customMade/qynxBg1.png" class="c-br3 c-mlr-auto c-ww32 c-hh32 imgaeObject" alt="" />
        </div>
        <span>内训</span>
      </a>
    </div>
    <!--内训选择弹框-->
    <div class="c-h" v-if="isShowQx">
      <div class="masker" @click="isShowQx = false;"></div>
      <div class="content c-flex-column c-br-tr12 c-br-tl12 c-text-hidden c-ph24">
        <div class="c-flex-column c-fs40 c-fw-b c-fc-xblack c-pv50 c-lh60 c-spacing-1-6">
          <span>请选择需要</span><span>进入的内训课堂</span>
        </div>
        <div v-for="(item, index) in qxArr" :key="index" @click="goQYNX(item.companyId, item.userId, item.token)" class="c-flex-row c-justify-sb c-aligni-center c-ph24 c-bg-white c-ph30 c-pv30 c-mb20 c-br8">
          <div class="c-flex-row c-aligni-center c-w90">
            <img :src="item.companyLogo || require('@/assets/defult270.png')" class="c-ww68 c-hh68 c-br10 c-mr20" />
            <span class="c-flex-grow1 c-w0 c-fc-xblack c-fs28 c-text-ellipsis2">{{item.companyName}}</span>
          </div>
          <span class="iconfont c-fc-gray c-fs20 c-ml10">&#xe635;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import circleCount from "@/components/templates/common/circleCount.vue"
export default {
  name: "NavBottomBar",
  components: {
    circleCount
  },
  props: {
    pageName: {
      type: String,
      default: "MICRO_PAGE"
    },
    itemIndex: {
      type: Number,
      default: 1
    },
    customNav: {
      type: Array,
      default: () => []
    },
    isHomePage: {
      type: Boolean,
      default: true
    },
    homeThemeCol: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      companyId: localStorage.getItem("companyId"),
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : 'mb5',
      unReadMsgCount: 0,
      navList: [],
      isiOS: navigator.userAgent.indexOf("IOSNewApp") > -1,
      isAdroid: false,
      isIphonex:false,
      qxArr: [], //企业内训数据
      isShowQx: false, //是否展示企业内训选择商家弹出
    };
  },
  computed: {
    showNavItem() { // 主要是过滤内容空的dom节点，不然在样式等列均分的时候会有问题
      return function(item) {
        return (([-2, 0, 3, 4, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 46, 47].includes(item.navType)) || (item.navType == 1 && this.companyAuth.enableMallModule == 1) || (item.navType == 2 && this.companyAuth.enableActivityModule == 1) || (item.navType == 6 && this.companyAuth.enableSignCardModule == 1) ||
        (item.navType == 7 && this.companyAuth.enableColumnModule == 1) || (item.navType == 8 && this.companyAuth.enableExamModule == 1) || (item.navType == 9 && this.companyAuth.enableSocialGroup == 1) || (item.navType == 10 && this.companyAuth.enableCollage == 1) ||
        (item.navType == 12 && this.companyAuth.enableQuestionModule == 1) || (item.navType == 5 && this.companyAuth.enableTeleviseLive == 1) || (item.navType == 13 && this.companyAuth.enableReservationModule == 1) ||
        ([40, 41, 42, 43, 44, 45].includes(item.navType) && localStorage.getItem('isWxApp')))
      }
    },
    hoverClass() {
      return function(type) {
        return this.pageName == "PREVIEW_INDEX" ? '' : (type == 22 && this.homeThemeCol && this.homeThemeCol.length > 0 ? 'homeTheme-fc-hover' : 'theme-fc-hover');
      }
    }
  },
  created() {
    this.navList = this.isHomePage == false ? this.customNav.items : (this.companyAuth && this.companyAuth.companyNav != null && this.companyAuth.companyNav.length > 0 ? this.companyAuth.companyNav : []);
  },
  mounted() {
    this.isAdroid = utilJs.isAndoridNewApp();
    this.isIphonex = /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
  },
  activated() {
    try {
      if (!localStorage.getItem("isVisitor") || localStorage.getItem("isVisitor") == 0) {
        this.getUnReadCount();
      }
    } catch (error) {
      this.unReadMsgCount = 0;
    }
    this.theme = localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default';
    this.isAdroid = utilJs.isAndoridNewApp();
    // if (!localStorage.getItem("companyAuth")) {
    //   setTimeout(() => {
    //     this.theme = localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default';
    //     this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    //     // 手机号登录偶尔会有刚登进去，没有取到值的情况，如果没有取到值，再取一次
    //     this.navList = this.isHomePage == false ? this.customNav.items : (this.companyAuth && this.companyAuth.companyNav != null && this.companyAuth.companyNav.length > 0 ? this.companyAuth.companyNav : []);
    //   }, 1000);
    // }
    //延迟一秒后重新赋值，不然取到companyAuth是之前缓存里的值。如果刷新之前，后台有更改一些设置，companyAuth取的不是最新的
    setTimeout(() => {
      this.theme = localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default';
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      if (localStorage.getItem('isWxApp') == 1) {
        this.companyAuth = this.companyAuth || {}
        let wxAppNav = localStorage.getItem("wxAppNav") ? JSON.parse(localStorage.getItem("wxAppNav")) : null;
        this.companyAuth.companyNav = this.getCompanyNav(wxAppNav || this.companyAuth.companyNav);
        localStorage.setItem("companyAuth", JSON.stringify(this.companyAuth));
      }
      // 手机号登录偶尔会有刚登进去，没有取到值的情况，如果没有取到值，再取一次
      this.navList = this.isHomePage == false ? this.customNav.items : (this.companyAuth && this.companyAuth.companyNav != null && this.companyAuth.companyNav.length > 0 ? this.companyAuth.companyNav : []);
    }, 1000);
    let rgbColor = utilJs.hexToRgb(this.homeThemeCol);
    this.homeThemeCol = rgbColor;
    if ((this.companyId == "36wegp" || this.companyId == "lj7l") && localStorage.getItem(this.companyId + "|token")) {
      this.getQYNXInfo();
    }
  },
  methods: {
    getQYNXInfo() {
      //获取企业内训列表
      utilJs.getMethod(global.apiurl + 'members/getUserQw', (res) => {
        this.qxArr = res && res.length > 0 ? res : [];
      });
    },
    showQyNX() {
      if (this.qxArr.length > 1) {
        //弹框让用户选择内训平台进行登录
        this.isShowQx = true;
      } else {
        this.goQYNX(this.qxArr[0].companyId, this.qxArr[0].userId, this.qxArr[0].token);
      }
    },
    goQYNX(c, u, t) {
      window.location.href = `http://${this.companyId == "lj7l" ? "training-new-cs.tjyx001.com" : "training.qxckjr.com"}/kpv2p/${c}/?#/?c=${c}&u=${u}&t=${t}`;
    },

    // getCount: function () {
    //   let count = 0;
    //   count = Number(this.$store.state.oem_store.msgCount.system) + Number(this.$store.state.oem_store.msgCount.push) + Number(this.$store.state.oem_store.msgCount.question) + Number(this.$store.state.oem_store.msgCount.comment) + Number(this.$store.state.oem_store.msgCount.income) + Number(this.$store.state.oem_store.msgCount.share);

    //   return count;
    // },

    getUnReadCount: function () {
      this.unReadMsgCount = 0;
      let $this = this;
      utilJs.getMethod(global.apiurl + 'messages/unreads', function (res) {
        let count = Number(res.system + res.share + res.question + res.push + res.income + res.comment);
        $this.unReadMsgCount = res.isReceiveMsg ? count : 0;

      });
    },
    getCompanyNav(companyNav) {
      if (!companyNav || (companyNav && companyNav.length == 0)) return
      if (localStorage.getItem('isWxApp') && localStorage.getItem('wxAppNav')) {
        companyNav = JSON.parse(localStorage.getItem('wxAppNav'))
      }
      for (let k = 0; k < companyNav.length; k++) {
        if (companyNav[k].navType == 22) {
          let queryObj = utilJs.getQueryObject(
            companyNav[k].otherHref
          );
          if (queryObj["mId"]) {
            companyNav[k].mId = queryObj["mId"];
          }
          if (queryObj["isPromotedAccount"]) {
            companyNav[k].isPromotedAccount = queryObj["isPromotedAccount"];
          } else {
            companyNav[k].isPromotedAccount = 0;
          }
        }
      }
      return companyNav
    },
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    // 点击ai助理
    clickGoAi(item) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: `/homePage/aiAssistant/aiAssistantChat?subScene=2&sort=${item.sort}` });
    },
    clickGoWxApp: function(item) {
      if (this.pageName == "PREVIEW_INDEX" && !localStorage.getItem('isWxApp')) return;
      let query = item.appID ? `?appId=${item.appID}&path=${encodeURIComponent(JSON.stringify(item.otherHref))}` : `?shortLink=${encodeURIComponent(item.otherHref)}`;
      utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
    },
    clickGoCourse: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/homePage/course/courseList" });
    },
    clickGoTestPaper: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/homePage/testPaper/testList" });
    },
    clickGoItemBack: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/homePage/itemBank/questionList" });
    },
    clickGoLearnCenter: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/member/watchList/learnCenter" });
    },
    clickGoClassify: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/homePage/course/courseCategory" });
    },
    clickGoSpread: function(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      this.$routerGo(this, "push", { path: "/homePage/spread/spreadIndex" });
    },
    clickGoIndex: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 1) {
        this.$routerGo(this, "push", { path: "/" });
      }
    },
    clickGoShop: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 2) {
        this.$routerGo(this, "push", { path: "/mall/mallIndex" });
      }
    },
    clickLivePersonalList(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      //查看所有小班课列表
      this.$routerGo(this, "push", { path: "/homePage/live/livePersonalList" });
    },
    clickMoreClassList(e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      //查看所有小班课列表
      this.$routerGo(this, "push", { path: "/homePage/privateClass/classList" });
    },
    clickGoActive: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 3) {
        this.$routerGo(this, "push", { path: "/activity/activityIndex" });
      }
    },
    clickGoMine: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 4) {
        this.$routerGo(this, "push", { path: "/member/memberIndex" });
      }
    },
    clickGoMessage: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 5) {
        this.$routerGo(this, "push", { path: "/message/messageIndex" });
      }
    },
    clickGoSignCard: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 6) {
        this.$routerGo(this, "push", { path: "/homePage/clockIn/clockInList" });
      }
    },
    clickGoColumn: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 7) {
        this.$routerGo(this, "push", { path: "/homePage/column/columnList" });
      }
    },
    clickGoExam: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 8) {
        this.$routerGo(this, "push", { path: "/homePage/examination/examinationList" });
      }
    },
    clickGoSocialGroup: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 9) {
        this.$routerGo(this, "push", { path: "/homePage/socialGroup/socialGroupList" });
      }
    },
    clickGoCollage: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 10) {
        this.$routerGo(this, "push", { path: "/homePage/collage/collageList" });
      }
    },
    clickGoQuestion: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 11) {
        if (localStorage.getItem("isVisitor")) {
          utilJs.goBindMobile({isLogin: 1});
        } else {
          this.$routerGo(this, "push", { path: "/homePage/qa/answerLord" });
        }
      }
    },
    clickGoLive: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 12) {
        this.$routerGo(this, "push", { path: "/homePage/live/liveList" });
      }
    },
    clickGoReservation: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 13) {
        this.$routerGo(this, "push", { path: "/homePage/reservation/reservationList" });
      }
    },
    clickGoWord: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 14) {
        this.$routerGo(this, "push", { path: "/homePage/word/wordList" });
      }
    },
    clickGoBooking: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 15) {
        this.$routerGo(this, "push", { path: "/homePage/booking/bookingList" });
      }
    },
    clickGoInterativeTest: function (e) { //交互测评
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 16) {
        this.$routerGo(this, "push", { path: "/homePage/mutuaTest/mutuaTestList" });
      }
    },
    clickGoVoiceEvaluation: function (e) { //语音测评
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 17) {
        this.$routerGo(this, "push", { path: "/homePage/voiceTest/voiceTestList" });
      }
    },
    clickGoKnowledgePackage: function (e) { //知识套餐
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 18) {
        this.$routerGo(this, "push", { path: "/homePage/package/packageList" });
      }
    },
    clickGoCamp: function (e) { //训练营
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 19) {
        this.$routerGo(this, "push", { path: "/homePage/camp/campList" });
      }
    },
    clickGoData: function (e) { //资料
      if (this.itemIndex != 20) {
        this.$routerGo(this, "push", { path: "/homePage/datum/datumList" });
      }
    },
    clickGoOuterChain: function (e, url) { //其他
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != -2 && url) {
        if (!url.includes("http") && !url.includes("https")) {
          url = "http://" + url;
        }
        // 定制刀法平台传递token
        let companyId = localStorage.getItem('companyId');
        if (companyId == 'jz5r22') {
          url = `${url}${JSON.stringify(utilJs.getQueryObject(url)) === '{}' ? '?' : '&'}companyToken=${localStorage.getItem("token")}`
        }
        utilJs.locationHref(url, this);
      }
    },
    clickGoMicroPage: function (e, item) { //微模板
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 22) {
        if (localStorage.getItem("microPageScroll")) {
          localStorage.removeItem("microPageScroll"); //微页面返回上一级回到上次滑动的位置，每次刷新页面，从头加载
        }
        if (item.mId) {
          let queryT = {'mId': item.mId}
          if (item.isPromotedAccount == 1) {
            queryT.isPromotedAccount = 1;
          }
          this.$routerGo(this, "push", { path: "/homePage/microPage/microPage", query: queryT });
        } else {
          let url = item.otherHref;
          if (url) {
            if (!url.includes("http") && !url.includes("https")) {
              url = "http://" + url;
            }
            utilJs.locationHref(url, this);
          }
        }
      }
    },
    clickGoEdu: function (e) { // 面授课列表
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 23) {
        this.$routerGo(this, "push", { path: "/edu/eduList" });
      }
    },
    clickGoMyEdu: function (e) { // 我的面授课
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 24) {
        let $this = this;
        let toPath = '/edu/faceTeaching';
        if (!localStorage.getItem("jwRole")) {
          utilJs.getMethod(global.apiurl + 'members/jwRole', function (res) { // 获取当前用户身份，是教务系统的讲师还是学员
            localStorage.setItem("jwRole", res.role);
            if (res.role == 2) {
              toPath = '/edu/courseManagment';
            }
            $this.$routerGo($this, "push", { path: toPath });
          });
        } else {
          toPath = localStorage.getItem("jwRole") == 2 ? '/edu/courseManagment' : '/edu/faceTeaching';
          this.$routerGo(this, "push", { path: toPath });
        }
      }
    },
    clickGoPromotedAccountList: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 26) {
        this.$routerGo(this, "push", { path: "/homePage/agent/promotedAccountList" });
      }
    },
    clickGoCircle: function (e) {
      if (this.pageName == "PREVIEW_INDEX") return;
      if (this.itemIndex != 27) {
        this.$routerGo(this, "push", { path: "/homePage/circle/circleList" });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav-bottom-bar {
  position: fixed;
  bottom: 0;
  background: #fff;
  height: 2rem;
  z-index: 100;
  max-width: 640px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  border-top: 1px solid #f2f2f2;
}
.iphone-nav-bottom-bar{
  height: 2.25rem;
  padding-bottom: 0.25rem;
}
.homeTheme-fc {
  color: var(--homeThemeCol);
}
.homeTheme-fc-hover:hover {
  color: var(--homeThemeCol);
}
.imgaeObject {
  object-fit: contain;
  object-position: bottom;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(101, 101, 101, 0.5);
}
.content {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  z-index: 1003;
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/customMade/qynxBg.png');
  background-size: 100% auto;
  min-height: 8.4rem;
}
</style>
